<template>
  <el-dialog :title="titleName" :visible.sync="dialogVisible" custom-class="custom_dialog" :close-on-click-modal="false"
             :modal-append-to-body="false" width="40%" :before-close="onClose">

    <div class="editContent">
      <el-form ref="menu" :rules="menuRules" :model="menu" label-width="100px" label-position="right">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" class="form-item" prop="parentId">
              <treeselect v-model="menu.parentId"
                          :options="parentMenu"
                          :normalizer="normalizer"
                          :show-count="true"
                          placeholder="选择上级菜单"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="菜单名称" class="form-item" prop="menuName">
              <el-input v-model="menu.menuName" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="菜单类型" class="form-item" prop="menuType">
              <el-radio-group v-model="menu.menuType" clearable>
                <el-radio :label="1">目录</el-radio>
                <el-radio :label="2">菜单</el-radio>
                <el-radio :label="3">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="显示顺序" class="form-item" prop="orderNum">
              <el-input-number v-model="menu.orderNum" :min="1" :max="100" label="显示顺序" clearable></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="菜单图标" class="form-item" prop="icon">
              <el-input v-model="menu.icon" placeholder="菜单图标">
                <svg-icon v-if="menu.icon" slot="prefix" :icon-class="menu.icon"></svg-icon>
                <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
                <el-button slot="append" icon="el-icon-plus" @click="chooseIcon">选择图标</el-button>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="菜单状态" class="form-item" prop="menuStatus">
              <el-radio-group v-model="menu.menuStatus" clearable>
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="11">
            <el-form-item v-if="menu.menuType !='3'" label="路由地址" class="form-item" prop="path">
              <el-input v-model="menu.path" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="权限标识" class="form-item" prop="perms">
              <el-input v-model="menu.perms" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div style="text-align: center">
      <el-button type="danger" @click="onClose" icon="el-icon-close">取消</el-button>
      <el-button type="primary" @click="onSubmit('menu')" icon="el-icon-check">提交</el-button>
    </div>

    <!--  选择图标界面  -->
    <icon_choose ref="iconChoose" @closeIconDialog="close_icon_dialog"></icon_choose>
  </el-dialog>
</template>

<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import svgIcons from '../../tool/icon/svg-icons'
  import icon_choose from '../../tool/icon/icon_choose'
  import api from '@/api/sysMenu'

  export default {
    name: 'menu-edit',
    components: { Treeselect, icon_choose },
    data() {
      return {
        svgIcons,
        titleName: '',
        dialogVisible: false,
        id: '',
        menu: {
          parentId: 1,
          icon: ''
        },
        value: '',
        parentMenu: [],
        menuRules: {
          parentId: [{ required: true, message: '请选择上级菜单', trigger: 'blur' }],
          menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
          menuType: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
          menuStatus: [{ required: true, message: '请选择菜单状态', trigger: 'blur' }],
          orderNum: [{ required: true, message: '请输入显示顺序', trigger: 'blur' }]
        }
      }
    },
    created() {
    },
    methods: {
      // 打开界面
      open(status, id) {
        // 查询上级菜单
        this.menu.parentId = 1,
          this.getParentMenu()
        if (status === 'add') {
          this.titleName = '新增菜单'
        }
        if (status === 'edit') {
          this.titleName = '编辑菜单'
          this.getMenuById(id)
        }
        this.dialogVisible = true

      },
      generateIconCode(symbol) {
        return symbol
      },
      handleClipboard(text, event) {
        // 图标名称
        this.menu.icon = text
      },
      // 选择图标
      chooseIcon() {
        this.$refs.iconChoose.open()
      },
      close_icon_dialog(data) {
        if (data.length === 1) {
          if (data.name !== null && data.name !== undefined) {
            return null
          } else {
            this.menu.icon = data
          }
        } else {
          this.menu.icon = data
        }
      },
      // 提交
      onSubmit(menu) {
        var me = this
        this.$refs[menu].validate((valid) => {
          if (valid) {
            api.insertMenu(me.menu).then(response => {
              if (response.status === 200) {
                me.$message({ message: response.msg, type: 'success' })
                me.onClose()
              } else {
                me.$message({ message: response.msg, type: 'error' })
              }
            })
          } else {
            return false
          }
        })
      },
      // 关闭/取消
      onClose() {
        this.parentId = ''
        // 清空表单
        this.$refs['menu'].resetFields()
        this.menu = {}
        //清空校验数据
        this.$refs['menu'].clearValidate()
        this.dialogVisible = false
        this.$emit('closeDialog', false)
      },
      // 根据Id查询菜单数据
      getMenuById(id) {
        var me = this
        api.selectMenuById({ id: id }).then(response => {
          if (response.status === 200) {
            me.menu = response.data
            me.id = response.data.parentId
          } else {
            me.$message({ message: response.msg, type: 'error' })
          }
        })

      },
      // 查询上级菜单数据
      getParentMenu() {
        var me = this
        api.getMenu(this.menu).then(response => {
          if (response.status === 200) {
            me.parentMenu = response.data
          } else {
            me.$message({ message: response.msg, type: 'error' })
          }
        })
      },

      // 转换菜单数据结构
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.menuName,
          children: node.children
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
  .icons-container {
    margin: 10px 20px 0;
    overflow: hidden;

    .grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .icon-item {
      margin: 20px;
      height: 85px;
      text-align: center;
      width: 100px;
      float: left;
      font-size: 30px;
      color: #24292e;
      cursor: pointer;
    }

    span {
      display: block;
      font-size: 16px;
      margin-top: 10px;
    }

    .disabled {
      pointer-events: none;
    }
  }
  .svg-icon{
    height: 2.5em;
  }
</style>
